
  <template>
  <div class="box">
    <header class="header">
      <router-link to="/liaoliao">
        <i class="el-icon-back"></i>
      </router-link>
      <img src="@/../public/img/liaoliao/userDetail.png" alt="userDetail" />
      <p>{{talkToSB.username}}</p>
    </header>

    <div class="content">
      <ul>
        <template v-for="(item,index) in this.$store.state.chatRecord">
          <li :key="index+a">
            <img src="@/../public/img/liaoliao/head.jpg" alt />
            <p>{{talkToSB.NewSpeak}}</p>
            <!-- <el-avatar src="@/../public/img/liaoliao/head.jpg"></el-avatar> -->
          </li>
          <li class="me" :key="index">
            <p>{{item.meTalk}}</p>
            <img src="@/../public/img/liaoliao/head2.jpg" alt />
            <!-- <el-avatar src="@/../public/img/liaoliao/head.jpg"></el-avatar> -->
          </li>
        </template>
      </ul>
    </div>

    <footer>
      <img class="void" src="@/../public/img/liaoliao/void.png" alt="void" />
      <div class="typeWrite">
        <input type="text" placeholder="在这里输入消息内容~" ref="send" />
        <button class="send" @click="send">发送</button>
      </div>
      <input class="upload" ref="upload" type="file" @change="upload($event)" accept=".jpg, .jpeg, .png"/>
      <img src="@/../public/img/liaoliao/pic.png" alt="pic" class="pic" @click="toUpload"/>
      <img class="more" src="@/../public/img/liaoliao/more.png" alt="more" />
    </footer>
  </div>
</template>






<script>
export default {
  data() {
    return {
      isWho: true,
      talkNow: 0,
      a: "key" 
    };
  },
  methods: {
    send(e) {
      //发送的事件
      if (this.$refs.send.value !== "") {
        console.log(this.$refs.send.value);
        this.$store.commit("sendTo", {
          time: new Date(),
          meTalk: this.$refs.send.value
        });
      } else {
        alert("输入内容不能为空");
      }
      this.$refs.send.value = "";
    },
    upload(e){
      console.log(this.$refs.upload.files)
    },
    toUpload(){
      this.$refs.upload.click()
    }
  },
  beforeMount() {
    this.talkNow = this.$store.state.talkToSB;
  },
  mounted() {
    this.talkNow = this.$store.state.talkToSB;
  },
  computed: {
    talkToSB() {
      return this.$store.state.talkToSB;
    },
    dataList() {
      // return this.$store.state.dataList.forEach((item, index) => {
      //   if (item.id === this.$store.state.talkId) {
      //     console.log(JSON.parse(JSON.stringify([item])));
      //     return JSON.parse(JSON.stringify([item]));
      //   }
      // });
      return this.$store.state.dataList.map((item, index) => {
        if (item.id === this.$store.state.talkId) {
          console.log(JSON.parse(JSON.stringify([item])));
          return item;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container .box {
  padding: 0 25px;
  display: flex;
  .header {
    height: 65.5px;
    padding-top: 26px;
    box-sizing: border-box;
    .el-icon-back {
      height: 13.25px;
      width: 14.25px;
      color: #1b1b1b;
      font-weight: 600;
    }
    img {
      width: 22px;
      height: 22px;
      float: right;
      margin-top: 3px;
    }
    p {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      margin-left: 10px;
      margin-top: 0;
      font-family: PingFang-SC-Bold;
    }
  }
  .content {
    flex: 1;
    overflow: auto;
    margin-bottom: 50px;
    ul {
      margin-top: 30px;

      li {
        display: flex;
        margin-top: 5px;
        img {
          border-radius: 50%;
          height: 48px;
          width: 48px;
        }
        p {
          margin-top: 20px;
          margin-left: 3px;
          width: 180px;
          word-wrap: break-word;
          display: inline-block;
          border-radius: 5px;
          line-height: 35px;
          font-size: 14px;
          padding: 0 15px;
          color: #666666;
          box-sizing: border-box;
          box-shadow: 3px 3px 1px 1px #eee;
        }
      }
      .me {
        display: flex;
        justify-content: flex-end;
        p {
          color: #fff;
          margin-right: 3px;
          background-image: linear-gradient(-90deg, #7a87fe 0%, #967efe 100%);
        }
      }
    }
  }
  footer {
    height: 50px;
    z-index: 999;
    position: absolute;
    top: 617.5px;
    display: flex;
    background-color: #fff;
    padding-bottom: 19.5px;
    box-sizing: border-box;
    .typeWrite {
      height: 30px;
      width: 225px;
      background-color: #fafafa;
      border: 1px solid #999999;
      border-radius: 15px;
      input {
        border: none;
        line-height: 30px;
        padding-left: 5px;
        box-sizing: border-box;
        color: #999999;
        background-color: rgba(0, 0, 0, 0);
      }
      button {
        border: none;
        color: #fc6566;
        font-size: 12px;
        font-family: PingFang-SC-Medium;
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid #999999;
        padding-left: 5px;
        box-sizing: border-box;
      }
    }
    .void {
      height: 19px;
      width: 15px;
      margin-right: 15.5px;
      filter: invert(30%);
    }
    .pic {
      width: 20px;
      height: 19px;
      margin: 0 13px;
      margin-top: 4px;
      border:none;
    }
    .more {
      height: 21.5px;
      width: 21.5px;
      margin-top: 3px;
    }
    .upload{
      display: none;
    }
    img {
      margin-top: 4px;
    }
  }
}
</style>